<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-10-18 09:35:29
 * @LastEditTime: 2023-10-19 10:38:03
 * @LastEditors:Hui
-->
<template>
  <popup-bottom ref="popup" title="我的可用卡券">
    <template #default>

      <scroll-view scroll-y class="list">
        <view
          class='coupon_item flex'
          v-for="item in list"
          :key="item.bonusId"
          @click="$emit('handleCouponClick', item)"
        >
          <view class='left flex-shrink0'>
            <view class='amount'>
              <text class='icon'>¥</text>
              {{item.typeMoney}}
            </view>
            <view class='min' v-if="item.minAmount">满{{item.minAmount}}可用</view>
            <view class='min' v-else>无使用条件</view>
          </view>
          <view class='right flex-1 w-min0'>
            <view class='name u-one-line'>{{item.typeName}}</view>
            <view class='time'>有效期:{{item.endTime}}</view>
          </view>
        </view>
      </scroll-view>

    </template>
  </popup-bottom>
</template>

<script>


export default {
  props: {
    evaluate: { type: Object, default: { evaluatePrice: 0 } },
    selectCoupon: { type: Object, default: { typeMoney: 0 } }
  },

  methods: {
    onOpen() {
      this.$refs.popup.open()
    },

    onClose() {
      this.$refs.popup.close()
    }
  }
}
</script>

<style lang="scss" scoped>

.list{
  height: 620rpx;
}

.coupon_item{
  width: 690rpx;
  margin: 0 auto 30rpx;
  color: #333;
  background: linear-gradient(85deg, #98E5FF, #00FFE1);
  box-shadow: 0 6rpx 8rpx 0 rgba(180,255,246,0.2);
  padding: 30rpx 20rpx 30rpx 0rpx;
  border-radius: 10rpx;

  .left {
    width: 260rpx;
    text-align: center;
  }

  .right {
    text-align: left;
    border-left: dashed #fff 1rpx;
    padding-left: 30rpx;
  }

  .amount {
    font-size: 48rpx;

    .icon {
      font-size: 26rpx;
    }
  }

  .min {
    font-size: 30rpx;
  }

  .name {
    font-size: 32rpx;
  }

  .time {
    font-size: 26rpx;
    margin-top: 30rpx;
  }
}

</style>